<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="imgs/huawei.ico"/>
    <!-- 1. 引入bootstrap.css -->
    <link rel="stylesheet" href="../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>商城首页</title>

    <style>
        img{
            width: 177px;
            height: 155px;
        }
    </style>
</head>
<body>
     <!-- 导航begin -->
     <div class="container-fluid">
        <!-- 定义一行 -->
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid"> 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">华为商城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="login.html">登录</a></li>
                        <li class="active"><a href="index.html">首页</a></li>
                        <li><a href="cart.html">我的购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">安全退出</a></li>
                        <li><img src="../imgs/001.png" style="width: 50px;height: 50px;border-radius: 50%;" alt=""></li>
                    </ul>
                </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- 导航end -->

    <!-- 主要信息 -->
    <div class="container-fluid">
        <div class="row" id="product">
            <!-- <div class="col-xs-12 col-md-3">
                <div class="thumbnail">
                   <img src="imgs/001.png" 
                    alt="通用的占位符缩略图">
                   <div class="caption">
                       <h3 class="text-center">华为智能眼镜</h3>
                       <p>【新品】华为智能眼镜 亮黑色 方形半框光学镜</p>
                       <p class="text-center" style="color: #ccc;font-size:12px;">新品省900</p>
                   </div>
                </div>
           </div> -->
        </div>
    </div>
     <!-- 必须先引入jquery.min.js -->
     <script src="../plugins/jquery.min.js"></script>
     <!-- 引入bootstrap.js -->
     <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

     <script>
         //制造数据 - json/product.json文件中
         //ajax请求来请求这个文件 - http协议

         //直接打开浏览器 - 产生跨域请求
         //违背了js的同源策略
         //1. 协议
         //2. ip地址
         //3. 端口号

         //定义一个变量
         let cart_data;

         $.get('data/product.json',function(data){
            //jquery是js的框架
            $(function(){
                //js获取dom对象的一个写法

                //js对象
                //let product = document.getElementById("product");

                //jquery对象
                let product = $("#product");

                //找错误 - 理论/原理
                
                let str = "";
                //主要是为了确保dom操作完成之后,才会执行此处的js代码
                //遍历上面的数据的数组
                for(let i=0;i<data.length;i++){
                        str+='<div class="col-xs-12 col-md-3"> \
                            <div class="thumbnail"> '
                            str+='<img src="imgs/'+data[i].url+'">'; 
                            str+='<div class="caption"> \
                                <h3 class="text-center">'+data[i].name+'</h3> \
                                <p>'+data[i].desc+'</p> \
                                <p class="text-center" style="color: #ccc;font-size:12px;">'+data[i].remark+'</p> \
                                <p class="text-center" style="color: red;font-size:12px;">价格:'+data[i].price+'</p> \
                                <p><span onclick="add_cart('+i+')" class="text-warning glyphicon glyphicon-shopping-cart"></span></p> \
                            </div> \
                            </div> \
                            </div>'
                }

                //product.innerHTML = str;
                product.html(str);

                cart_data = data;

            })
         })

         //加入购物车
         function add_cart(i){
            let json_str = localStorage.getItem("carts");
            //将json字符串转成json对象
            let json_obj = JSON.parse(json_str);
            let arr = json_obj.admin;
            
            //将最新得到商品放入到这个数组中
            arr.push(cart_data[i]);

            //再次写入到本地存储中
            localStorage.setItem('carts','{"admin":'+JSON.stringify(arr)+'}');

            window.location='cart.html';
         }

         

     </script>
</body>
</html>